<template>
  <div>
    <HomeTop></HomeTop>
    <div class="">
      <div class="ok-page-width">
        <div>
          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/news.jpg')"></el-image>
        </div>
        <div class="line-20"></div>
        <div class="ok-box-flex">
          <div class="ok-page-left">
            <div class="ok-width-max">
              <div class="ok-park-model-menu" style="width: 100%">
                <div class="title">新闻中心</div>
                <div class="item" :class="{active1:newsType=='zxdt'}" id="contactInfo" @click="selectInfo('zxdt')" style="cursor:pointer">最新动态</div>
                <div class="item" :class="{active1:newsType=='xwzx'}" id="feedback" @click="selectInfo('xwzx')" style="cursor:pointer">新闻资讯</div>
                <div class="item" :class="{active1:newsType=='tzgg'}" id="feedback" @click="selectInfo('tzgg')" style="cursor:pointer">通知公告</div>
              </div>
            </div>
          </div>
          <div class="ok-page-main">
            <div class="ok-width-max">
              <div class="ok-park-info-title">
                <el-page-header @back="goBack" :content="newsInfo.typeName"></el-page-header>
              </div>
              <div class="ok-info20" style="min-height: 500px">
                <div class="">
                  <div class=" ok-white">
                    <div class="">
                      <div class="ok-info20" style="margin-top: 20px;">
                        <div class="ok-article-body">
                          <div class="line-20"></div>
                          <div style="text-align: center;font-size: 25px; color: #333333">
                            {{newsInfo.title}}
                          </div>
                          <div class="line-20"></div>
                          <div style="text-align: center;font-size: 18px; color: #333333">
                            {{newsInfo.subtitle}}
                          </div>
                          <div class="line-20"></div>
                          <div class="ok-box-center" style="color: #999999">
                            发表时间：{{ ok.date.formatDateTimeCN(newsInfo.onlineTime) }}
                          </div>
                          <div class="ok-box-center" style="color: #999999">
                            作者： {{ newsInfo.author }}
                            <div style="padding-left: 20px;"></div>
                            关键字：
                            {{ newsInfo.newsKeyword }}
                          </div>
                          <div style="padding: 20px 40px 40px 40px; ">
                            <div v-html="newsInfo.intro"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import ok from "../../assets/ok";
import HomeFoot from "@/components/HomeFoot.vue";
import api from "@/api/publicApi";

export default {
  name: 'NewsIndex',
  computed: {
    ok() {
      return ok
    }
  },
  components: {
    HomeFoot,
    HomeTop,
  },
  data(){
    return{
      showThis:0,
      newsType:"zxdt",
      newsInfo:{},
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    init(){
      api.getnews({id:this.$route.query.id}).then(res =>{
        this.newsInfo = res.result;
        this.newsType = this.newsInfo.typeCode;
      })
    },
    selectInfo(item){
      this.newsType = item;
      this.$router.push({
        path:"/views/news/index",
        query:{
          type:item
        }
      })
    },
    goBack() {
      history.go(-1);
    },
  }
}
</script>
<style>
.box_under_line{
  padding: 10px 0;
  border-bottom: 1px solid rgb(136, 139, 141);
}
</style>
